<template>
    <div>
        <el-page-header :content="`页面详情（${$route.query.pageTitle}）`" @back='$router.back()'> </el-page-header>
        <el-divider content-position='left' >
            <el-button type='primary' @click='toDetail(null)'>添加模块</el-button>
        </el-divider>
        <el-table
            :data="tableData"
            stripe
            border
            :header-cell-style="TABLE_HEADER_CELL_STYLE">
            <el-table-column label='id' prop="id"></el-table-column>
            <el-table-column prop='type_name' label='页面名称'>
                <template v-slot='scope'>
                    <edit-table-column v-model='scope.row' edit-key='title' @change='updateHandle(scope.row)'></edit-table-column>
                </template>
            </el-table-column>
            <el-table-column prop='status' label='状态'>
                <template v-slot='scope'>
                    <el-switch v-model='scope.row.status' @change='updateHandle(scope.row)'></el-switch>
                </template>
            </el-table-column>
            <el-table-column label='操作'>
                <template v-slot='scope'>
                    <el-popconfirm title="确认删除吗？" @confirm='deleteHandle(scope.row)' class="popconfirm">
                        <el-button type='text' slot="reference">删除</el-button>
                    </el-popconfirm>
                    <el-button type='text' @click='toDetail(scope.row)'>模块详情</el-button>
                </template>
            </el-table-column>
        </el-table>
        <o-pagination :total='total' @current-change='currentChange'></o-pagination>
    </div>
</template>

<script>
    import {toast} from '@u'
    export default {
        data () {
            return {
                createForm : {
                    title : null,//模块名称
                    decorate_module : null,//模块类型
                    decorate_json : null,//模块内容
                    link_url : null,//模块链接
                    background_color : null,//背景颜色
                    row_number : null,//每行数量
                    page_id : this.$route.params.id,//关联的页面id

                },
                tableData : [],
                queryForm : {
                    page : 1,
                    limit : 10
                },
                total : 0,
            }
        },
        created () {
            this.getTableData();
        },
        methods : {
             getTableData () {
                this.__api.contentApi.decorateModuleList(this.queryForm).then(res => {
                    this.isLoading = false;
                    this.total = res.total;
                    this.tableData = res.data;
                })
            },
            //删除
            deleteHandle (row) {
                this.__api.contentApi.decorateModuleDelete({
                    id : row.id
                }).then(_ => {
                    toast('操作成功');
                    this.getTableData();
                })
            },
            //更新
            updateHandle (row) {
                this.$nextTick(_ => {
                    this.__api.contentApi.decorateModuleUpdate(row).then(_ => {
                        toast('操作成功')
                    })
                })
            },
            //创建确认
            createConfirm () {
                if (!this.createForm.title) {
                    toast('请填写模块名称', 'error');
                    return;
                }
                this.__api.contentApi.decorateModuleCreate(this.createForm).then(_ => {
                    toast('操作成功');
                    this.$refs.popover.doClose();
                    this.getTableData();
                    this.resetPopover();
                })
            },
            currentChange (page) {
                this.queryForm.page = page;
                this.getTableData();
            },
            //重置相关数据
            resetPopover () {
                this.createForm = {
                    title : null
                }
            },
            toDetail (row) {
                if (!row) {
                    this.$router.push({
                        path : `/content/decorate-module-detail`,
                        query : {
                            page_id : this.$route.params.id,
                        }
                    })
                } else {
                    this.$router.push({
                        path : `/content/decorate-module-detail/${row.id}`,
                        query : {
                            page_id : this.$route.params.id,
                            data : JSON.stringify(row)
                        }
                    })
                }
            }
        }
    }
</script>

<style>

</style>